import React, { useCallback, useEffect, useState } from 'react';
import { Table, Modal } from 'antd';
import { GetRoomUserMsg } from '../service';
import { ColumnsType } from 'antd/es/table';
import { changeBULostCard, decrement, setChangeRoomList } from '../counter/counterSlice';
import { useDispatch, useSelector } from 'react-redux';
import { getLocale, useIntl } from '@umijs/max';

interface Props {
    ChangeOrdinaryflag: boolean
    setChangeOrdinaryflag: (event: boolean) => void
    ModeMsg: any;
    setIsChangeRooms: (event: number) => void;
    setsendMsg: (event: stateObj) => void
    setType: (event: string) => void
}

const ChangeOrdinary: React.FC<Props> = ({ setType, setsendMsg, setIsChangeRooms, ChangeOrdinaryflag, ModeMsg, setChangeOrdinaryflag }) => {
    const intl =useIntl()
    const dispatch = useDispatch()
    const flag = useSelector(state => state.counter.value)
    useEffect(() => {
        if (flag) {
            let card = localStorage.getItem("RecardNum")
            let list = dataSourceList.map((item) => {
                return card == item.cardNum ? { ...item, sendflag: "已退卡" } : item;
            })
            setdataSourceList(list)
            dispatch(decrement())
            let a = list.filter((item) => item.sendflag == "未退卡")
            if (!a.length) {
                let data = JSON.parse(ModeMsg.current.cmdInfo)
                let AA = { ...data, roomid: ModeMsg.target.roomId, roomName: ModeMsg.target.roomName }
                let res = { ...ModeMsg.current, roomId: ModeMsg.target.roomId, subRoomNo: "", roomNo: ModeMsg.target.roomNo, roomName: ModeMsg.target.roomName, cmdInfo: JSON.stringify(AA) }
                dispatch(changeBULostCard(res))
                setsendMsg(AA)
                setType("开始换房")
                handleCancel()
            }
        }

    }, [flag])
    useEffect(() => {
        AA()
    }, [])
    const [dataSourceList, setdataSourceList] = useState([])
    const AA = useCallback(async () => {
        let { data } = await GetRoomUserMsg(ModeMsg.current.roomId)
        if (data.list) {
            let list = data.list.map((item) => {
                if (item.status == 1) {
                    return {
                        ...item, sendflag: "未退卡"
                    }
                }
            })
            setdataSourceList(list)
            dispatch(setChangeRoomList({ Now: list, Next: ModeMsg.target }))
        }

    }, [])
    const handleCancel = () => {
        setChangeOrdinaryflag(false);
        setIsChangeRooms(0)
    };
    const columns: ColumnsType<UserData> = [
        {
            key: "realName",
            title: intl.formatMessage({id:"business.Name"}),
            dataIndex: 'realName',
            filterMode: 'tree',
            filterSearch: true,
            width: 70
        },
        {
            key: "roomNo",
            title: intl.formatMessage({id:"business.Room"}),
            render: (_, record: { subRoomNo: string; roomNo: string }) => (record.subRoomNo ? record.subRoomNo : record.roomNo),

        },
        {
            key: "mobile",
            title: intl.formatMessage({id:"business.Mobile"}),
            dataIndex: 'mobile',
            align: "center",
        },
        {
            key: "cardNum",
            title: intl.formatMessage({id:"business.Room card"}),
            dataIndex: 'cardNum',
            align: "center",
        },
        {
            key: "issuingTime",
            title: intl.formatMessage({id:"business.Card issuance time"}),
            dataIndex: 'issuingTime',
            filterSearch: true,
            align: "center",
        },
        {
            key: "sendflag",
            title: intl.formatMessage({id:"business.Change room card."}),
            dataIndex: 'sendflag',
            filterSearch: true,
            align: "center",
        },


    ];
    return (
        <>

            <Modal title={intl.formatMessage({id:"business.Change rooms"})} width={900} footer={null} open={ChangeOrdinaryflag} onCancel={handleCancel}>
                <br />
                {/* <p style={{ color: "red" }}>请先将{ModeMsg.current.roomName}房卡放置发卡器上开始换房卡</p> */}
                <Table dataSource={dataSourceList} columns={columns} rowKey={(item) => item.id} pagination={false} />
                <br />
            </Modal>
        </>
    );
};

export default ChangeOrdinary;